<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>几个注意点</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <!--
        1. 关于组件名：
            一个单词组成：
                第一种写法（首字母小写）：school
                第二种写法（首字母大写）：School
            多个单词组成：
                第一种写法（kebab-case命名）：my-school
                [kɪˈbæb]n.	烤肉串;
                第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
            备注：
                （1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
                （2）可以使用name配置项指定组件 在开发者工具中呈现的 名字。

        2. 关于组件标签：
            第一种写法：<school></school>
            第二种写法：<school/>
            备注：不使用脚手架时，<school/>会导致 后续组件 不能渲染。

        3. 一个简写方式：
            const school = Vue.extend(options) 可简写为：const school = options
     -->

    <div id="root">
      <h1>{{msg}}</h1>
      <my-school></my-school>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const school = Vue.extend({
      name: "xuexiao",
      template: `
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
      data() {
        return {
          schoolName: "南京财经大学",
          address: "文苑路3号",
        };
      },
    });

    new Vue({
      el: "#root",
      data: {
        msg: "欢迎学习Vue组件",
      },
      components: {
        // MySchool': school,// 脚手架中推荐使用
        "my-school": school,
      },
    });
  </script>
</html>
